<template>
    <div class="fragmentUnionBox" :id="id" :class="{'fragmentUnionBox2':styleType==2,'fragmentUnionBox3':styleType==3}">
        <img class="baseImg" @load="setFragment(id)" :src='cardUrl' :style="style">
        <div class="fragmentBox">
            <div class="ft-top">
                <span class="frgspan fragment1"><em v-if="getNumber(1)">{{getNumber(1)}}</em></span>
                <span class="frgspan fragment2"><em v-if="getNumber(2)">{{getNumber(2)}}</em></span>
            </div>
            <div class="ft-bottom">
                <span class="frgspan fragment3"><em v-if="getNumber(3)">{{getNumber(3)}}</em></span>
                <span class="frgspan fragment4"><em v-if="getNumber(4)">{{getNumber(4)}}</em></span>
            </div>
        </div>
        <slot/>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'

export default {
    components:{
       
    },
    props:{
        fragmentNoList:{
            type:Array,
            default:[]
        },
        cardUrl:String,
        styleType:Number,
        id:{
            type:String,
            default:'fragmentUnionBox'
        },
        style:String
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            cardItem:{}
        })

        onMounted(()=>{
            state.cardItem = JSON.parse(sessionStorage.getItem('cardItem') || '{}')
        })
        const setFragment = (id)=>{
            const ele = document.querySelector(`#${id} .baseImg`)
            const w = ele.clientWidth
            const h = ele.clientHeight
            const spans = document.getElementsByClassName('frgspan')
            for(let j=0;j<spans.length;j++){ // 先清除所有的背景
                spans[j] && (spans[j].style.background = "none")
            }
            props.fragmentNoList.forEach(item =>{
                const bgEle = document.querySelector(`#${id} .fragment${item}`)
                bgEle.style.backgroundImage = `url(${ele.src})`
                bgEle.style.backgroundSize = `${w}px ${h}px`
                if(item==1){
                    bgEle.style.backgroundPosition = 'left top'
                }else if(item==2){
                    bgEle.style.backgroundPosition = 'right top'
                }else if(item==3){
                    bgEle.style.backgroundPosition = 'left bottom'
                }else if(item==4){
                    bgEle.style.backgroundPosition = 'right bottom'
                }
            })
        }

        const getNumber = (num)=>{
            if(!num || !state.cardItem.fragmentList) return
            const res = state.cardItem.fragmentList.find(ele =>ele.fragmentNo == num)
            if(res && res.fragmentNum){
                return res.fragmentNum
            }else{
                return ''
            }
        }

        return{
            ...toRefs(state),
            setFragment,
            getNumber
        }
    }
}
</script>

<style lang="scss" scoped>
    .fragmentUnionBox{
        position: relative;
        z-index: 10;
        font-size: 0;
        &.fragmentUnionBox2{
            img{
                max-width: 450px;
                max-height: 500px;
            }
        }
        &.fragmentUnionBox3{
            img{
                max-width: 100%;
                max-height: 100%;
            }
        }
        img{
            display: block;
            max-width: 600px;
            max-height: 500px;
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
        }
        .fragmentBox{
            display: flex;
            flex-flow: column;
            position: absolute;
            z-index: 11;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            //background: rgba(0,0,0,0.5);
            .ft-top,.ft-bottom{
                display: flex;
                flex: 1;
                span{
                    position: relative;
                    z-index: 10;
                    background: rgba(0,0,0,0.2);
                    flex: 1;
                    background-repeat: no-repeat;
                    flex-shrink: 0;
                    em{
                        display: flex;
                        position: absolute;
                        z-index: 10;
                        justify-content: center;
                        align-items: center;
                        background: #FF6600;
                        width: 35px;
                        height: 35px;
                        bottom: 5px;
                        right: 5px;
                        border-top-right-radius: 8px;
                        border-bottom-left-radius: 8px;
                        font-family: Inter-Medium, Inter;
                        font-weight: 500;
                        font-size: 20px;
                        color: #fff;
                        font-style: normal;
                    }
                }
            }
            .ft-top{
                span{
                    border-bottom: 1px solid rgba(255,255,255,0.5);
                    &+span{
                        border-left: 1px solid rgba(255,255,255,0.5);
                    }
                }
            }
            .ft-bottom{
                span{
                    &+span{
                        border-left: 1px solid rgba(255,255,255,0.5);
                    }
                }
            }
        }
    }
</style>